<template>
	<view >
		<navSearchBar title="筛选" ></navSearchBar>
		<scroll-view class="select-field">
			<view class="select-item">
				<view class="title">列表排序</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in sortData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'SORT')?'active-style':'']" @click="selectSearch(item,'SORT')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">基地分类</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in baseTypeList" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'TYPE')?'active-style':'']" @click="selectSearch(item,'TYPE')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">所在区域</view>
				<view class="select-item-body-area-type">
					<view v-for="(item,index) in areaList" :key="index" class="text-body" :class="[index==0?'text-body-4':'area-type',activeHandle(item,'AREA')?'active-style':'']" @click="selectSearch(item,'AREA')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">星级分类</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in starLevelData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'STAR')?'active-style':'']" @click="selectSearch(item,'STAR')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">合作等级</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in cooperationLevelData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'COOPERATION')?'active-style':'']" @click="selectSearch(item,'COOPERATION')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">餐饮容纳</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in cateringCapacityData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'CATERING_CAPACITY')?'active-style':'']" @click="selectSearch(item,'CATERING_CAPACITY')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">住宿容纳</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in stayCapacityData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'STAY_CAPACITY')?'active-style':'']" @click="selectSearch(item,'STAY_CAPACITY')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">会议容纳</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in meetingCapacityData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'MEETING_CAPACITY')?'active-style':'']" @click="selectSearch(item,'MEETING_CAPACITY')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<tn-button fontBold fontSize="32" backgroundColor="#FFA457" fontColor="#FFFFFF" width="442rpx" height="72rpx" @click="comfireSearch">确定筛选</tn-button>
				<tn-button class="right-button" margin="0 0 0 20rpx" fontSize="24" border  backgroundColor="#F7F8FC" fontColor="#000000" width="230rpx" height="72rpx" @click="cancel">清空条件</tn-button>
			</view>
		</scroll-view>
		<tn-popup v-model="maskVisible" mode="bottom" :negativeTop="negativeTop" closeBtn safeAreaInsetBottom> 
		  <view class="popup-field" >
		  	<view class="title">自定义人数</view>
			<tn-input class="input" placeholder="填写人数" focus inputAlign="center" v-model="personNum" type="number"></tn-input>
			<tn-button fontBold fontSize="32" backgroundColor="#FFA457" fontColor="#FFFFFF" width="630rpx" height="72rpx" @click="customNum">确定</tn-button>
		  </view>
		</tn-popup>
		<tn-picker safeAreaInsetBottom mode="multiSelector" v-model="areaShow"  :range="areaData" rangeKey="title" :defaultSelector="initAreaData" @columnchange="areaColumnchange" @confirm="areaConfirm"></tn-picker>
	</view>
</template>

<script>
	const SORT = 'SORT';
	const STARLEVEL = 'STAR';
	const BASETYPE = 'TYPE';
	const AREA = 'AREA';
	const COOPERATION_LEVEL = 'COOPERATION';
	const CATERING_CAPACITY = 'CATERING_CAPACITY';
	const STAY_CAPACITY = 'STAY_CAPACITY';
	const MEETING_CAPACITY = 'MEETING_CAPACITY';
	export default {
		data() {
			return {
				sortData:[],
				searchData:{
					order:'',
					conference_total:'',
					stay_total:'',
					accommodate_total:'',
					cooperation_level:'',
					star_level:'',
					region_id:'',
					province_id:'',
					city_id:'',
					category_id:''
					},
				baseTypeList:[],
				areaList:[{text:'不限',value:''},{text:'请选择区域',value:1}],
				starLevelData:[],
				cooperationLevelData:[],
				cateringCapacityData:[],
				stayCapacityData:[],
				meetingCapacityData:[],
				maskVisible:false,
				personNum:'',
				negativeTop:0,
				areaData:[[{ title: "不限", id:''}],[{ title: "不限", id:''}],[{ title: "不限", id:''}]],
				areaShow:false,
				initAreaData:[0,0,0]
			}
		},
		onLoad(){
			console.log('onLoadfilter',this.$Route.query)
			const {sortData,starLevelData,cooperationLevelData,searchData} = this.$Route.query;
			this.sortData = sortData;
			this.starLevelData = starLevelData;
			this.cooperationLevelData = cooperationLevelData;
			this.searchData = searchData;
			console.log('searchdata',searchData)
			if(this.searchData['areaText']){
				this.areaList[1].text = this.searchData['areaText'];
			}
			if(this.searchData['accommodateCustomText']) {
				this.cateringCapacityData[this.cateringCapacityData.length -1].text = this.searchData['stayCustomText'];
			}
			if(this.searchData['stayCustomText']){
				this.stayCapacityData[this.stayCapacityData.length -1].text = this.searchData['stayCustomText'];
			}
			if(this.searchData['conferenceCustomText']){
				this.meetingCapacityData[this.meetingCapacityData.length -1].text = this.searchData['stayCustomText'];
			}
			
			this.getBaseTypeList();
			this.getCateringCapacityData();
			// this.getStayCapacityData();
			// this.getMeetingCapacityData();
			uni.onKeyboardHeightChange(res => {
			  console.log('高度uuuuuu',res.height)
			})
			this.getAreaList(0);
		},
		methods: {
			areaConfirm(data){
				console.log('datatatata',data)
				let proviceData = this.areaData[0][data[0]];
				let cityData = this.areaData[1][data[1]];
				let regionData = this.areaData[2][data[2]];
				this.searchData['province_id'] = proviceData.id;
				this.searchData['city_id'] = cityData.id;
				this.searchData['region_id'] = regionData.id;
				if(this.searchData['province_id'] !== ''){
					this.areaText = proviceData.title;
				}
				if(this.searchData['city_id'] !== ''){
					this.areaText += '/'+ cityData.title;
				}
				if(this.searchData['region_id'] !== ''){
					this.areaText += '/'+ regionData.title;
				}
				if(this.areaText){
					this.areaList[1].text = this.areaText;
				}
				this.searchData['areaText'] = this.areaText;
			},
			areaColumnchange({column, index}){
				console.log('column',column,index);
				let parentId = this.areaData[column][index].id;
				if(column < 2){
					this.getAreaList(parentId, column+1);
				}
				this.$set(this.initAreaData,column,index);
			},
			getAreaList(parentId,column=0){
				this.$http.get('/api/common/area/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						this.$set(this.areaData,column,data)
						console.log('ccccccccc',this.areaData)
						
					} else {
						
					}
					
				})
			},
			getCateringCapacityData(type){
				this.$http.get('/api/dictionary/data',{title:'accommodate_total'}).then((res) => {
					if(res.data.status == 200) {
						this.cateringCapacityData = JSON.parse(JSON.stringify(res.data.data||[]));
						this.cateringCapacityData.unshift({text:'不限',value:''});
						this.cateringCapacityData.push({text:'自定义',value:'custom',type:'custom'});
						
						this.stayCapacityData = JSON.parse(JSON.stringify(res.data.data||[]));
						this.stayCapacityData.unshift({text:'不限',value:''});
						this.stayCapacityData.push({text:'自定义',value:'custom',type:'custom'});
						
						this.meetingCapacityData = JSON.parse(JSON.stringify(res.data.data||[]));
						this.meetingCapacityData.unshift({text:'不限',value:''});
						this.meetingCapacityData.push({text:'自定义',value:'custom',type:'custom'});
						
					}
				})
			},
			getStayCapacityData(){
				this.$http.get('/api/dictionary/data',{title:'stay_total'}).then((res) => {
					if(res.data.status == 200) {
						this.stayCapacityData = res.data.data||[];
						this.stayCapacityData.unshift({text:'不限',value:''});
						this.stayCapacityData.push({text:'自定义',value:'custom',type:'custom'});
						
					}
				})
			},
			getMeetingCapacityData(){
				this.$http.get('/api/dictionary/data',{title:'conference_total'}).then((res) => {
					if(res.data.status == 200) {
						this.meetingCapacityData = res.data.data||[];
						this.meetingCapacityData.unshift({text:'不限',value:''});
						this.meetingCapacityData.push({text:'自定义',value:'custom',type:'custom'});
					}
				})
			},
			getBaseTypeList() {
				this.$http.get('/api/business/place/category/select').then((res) => {
					if(res.data.status == 200) {
						this.baseTypeList = res.data.data||[];
						this.baseTypeList.map((el)=>{el.text = el.title;el.value = el.id;return el})
						this.baseTypeList.unshift({text:'全部基地',value:''});
					}
				})
			},
			activeHandle(item,type){
				if(type == SORT) {
					return item.value === this.searchData['order']
				} else if (type == STARLEVEL) {
					return item.value === this.searchData['star_level']
				} else if(type == COOPERATION_LEVEL){
					return item.value === this.searchData['cooperation_level']
				} else if(type == CATERING_CAPACITY){
					return item.value === this.searchData['accommodate_total']
				} else if(type == STAY_CAPACITY){
					return item.value === this.searchData['stay_total']
				}
				else if(type == MEETING_CAPACITY){
					return item.value === this.searchData['conference_total']
				}else if(type == BASETYPE){
					return item.value === this.searchData['category_id']
				}else if(type == AREA){
					if(this.searchData['province_id']&&item.value){
						return true;
					}
					if(!this.searchData['province_id']&&!item.value){
						return true;
					}
					return false;
				}
			},
			selectSearch(item,type){
				
				if(type == SORT) {
					this.searchData['order'] = item.value;
				} else if (type == STARLEVEL) {
					this.searchData['star_level'] = item.value;
					
				} else if(type == COOPERATION_LEVEL){
					this.searchData['cooperation_level'] = item.value;
				} else if(type == CATERING_CAPACITY){
					//自定义
					if(item.type == 'custom'){
						this.maskVisible = true;
						this.openPopupType = CATERING_CAPACITY;
						
					}else {
						this.searchData['accommodate_total'] = item.value;
						this.cateringCapacityData[this.cateringCapacityData.length - 1].text = '自定义';
						this.cateringCapacityData[this.cateringCapacityData.length - 1].value = 'custom';
						this.searchData['accommodateCustomText'] = '';
					}
				}else if(type == STAY_CAPACITY){
					if(item.type == 'custom'){
						this.maskVisible = true;
						this.openPopupType = STAY_CAPACITY;
					} else {
						this.searchData['stay_total'] = item.value;
						this.stayCapacityData[this.stayCapacityData.length - 1].text = '自定义';
						this.stayCapacityData[this.stayCapacityData.length - 1].value = 'custom';
						this.searchData['stayCustomText'] = '';
					}
				}else if(type == MEETING_CAPACITY){
					if(item.type == 'custom'){
						this.maskVisible = true;
						this.openPopupType = MEETING_CAPACITY;
					} else {
						this.searchData['conference_total'] = item.value;
						this.meetingCapacityData[this.meetingCapacityData.length - 1].text = '自定义';
						this.meetingCapacityData[this.meetingCapacityData.length - 1].value = 'custom';
						this.searchData['conferenceCustomText'] = '';
					}
				}else if(type == BASETYPE){
					this.searchData['category_id'] = item.value;
				}else if(type == AREA){
					if(item.value !== '') {
						this.areaShow = true;
					} else {
						this.searchData['province_id'] = '';
						this.searchData['city_id'] = '';
						this.searchData['region_id'] = '';
						this.areaList[1].text = '请选择区域';
						this.searchData['areaText'] = '';
					}
				}
				
				
			},
			customNum(){
				this.maskVisible = false;
				if(this.openPopupType == MEETING_CAPACITY){
					
					if(this.personNum){
						this.meetingCapacityData[this.meetingCapacityData.length - 1].text = this.personNum+'+';
						this.meetingCapacityData[this.meetingCapacityData.length - 1].value = this.personNum;
						this.searchData['conference_total'] = this.personNum;
						this.searchData['conferenceCustomText'] = this.personNum+'+';
					} else {
						this.searchData['conference_total'] = '';
						this.searchData['conferenceCustomText'] = '';
					}
					
					console.log('MEETING_CAPACITY',this.meetingCapacityData)
					
				} else if(this.openPopupType == CATERING_CAPACITY){
					if(this.personNum){
						this.cateringCapacityData[this.cateringCapacityData.length - 1].text = this.personNum+'+';
						this.cateringCapacityData[this.cateringCapacityData.length - 1].value = this.personNum;
						this.searchData['accommodate_total'] = this.personNum;
						this.searchData['accommodateCustomText'] = this.personNum+'+';
					} else {
						this.searchData['accommodate_total'] = '';
						this.searchData['accommodateCustomText'] = '';
					}
					
					console.log('CATERING_CAPACITY',this.cateringCapacityData)
				} else if(this.openPopupType == STAY_CAPACITY){
					if(this.personNum){
						this.stayCapacityData[this.stayCapacityData.length - 1].text = this.personNum+'+';
						this.stayCapacityData[this.stayCapacityData.length - 1].value = this.personNum;
						this.searchData['stay_total'] = this.personNum;
						this.searchData['stayCustomText'] = this.personNum+'+';
					} else {
						this.searchData['stay_total'] = '';
						this.searchData['stayCustomText'] = '';
					}
					console.log('STAY_CAPACITY',this.stayCapacityData)
				}
				console.log('bbbbbbbbbbb',this.cateringCapacityData,this.stayCapacityData,this.meetingCapacityData)
			},
			comfireSearch(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.searchData = this.searchData;
				console.log('filter11111111',prevPage)
				
				this.$Router.back();
			},
			cancel(){
				for(let key of Object.keys(this.searchData)){
					this.searchData[key] = '';
				}
				this.stayCapacityData[this.stayCapacityData.length - 1].text = '自定义';
				this.stayCapacityData[this.stayCapacityData.length - 1].value = 'custom';
				this.cateringCapacityData[this.cateringCapacityData.length - 1].text = '自定义';
				this.cateringCapacityData[this.cateringCapacityData.length - 1].value = 'custom';
				this.meetingCapacityData[this.meetingCapacityData.length - 1].text = '自定义';
				this.meetingCapacityData[this.meetingCapacityData.length - 1].value = 'custom';
				this.areaList[1].text = '请选择区域'
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-field{
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		background-color:#FFFFFF;
		padding-top:10rpx;
		.select-item{
			padding:30rpx;
			.title{
				color:#616571;
				font-size: 32rpx;
				font-weight: $Semibold;
				margin-bottom: 30rpx;
				line-height: 32rpx;
			}
			.select-item-body{
				display: grid;
				grid-row-gap: 30rpx;
			}
			.select-item-body-3{
				grid-column-gap: 16rpx;
				grid-template-columns: auto auto auto;
			}
			.select-item-body-4{
				grid-column-gap: 20rpx;
				grid-template-columns: auto auto auto auto;
			}
			.text-body{
				text-align: center;
				line-height: 72rpx;
				font-size: 24rpx;
				color:#6F6F6F;
				background-color: #F7F8FC;
				border-radius: 10rpx;
			}
			.text-body-3{
				
				width: 220rpx;
				height: 72rpx;
				
			}
			.text-body-4{
				
				width: 160rpx;
				height: 72rpx;
				
			}
			.active-style{
				border: 2rpx solid #FFA457;
				background-color: #FDF1E5;
				color: #EE8731;
			}
			.select-item-body-area-type{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.area-type{
					flex:1;
					margin-left: 20rpx;
				}
				
			}
		}
		.footer{
			width: 100%;
			padding:10rpx 28rpx calc(env(safe-area-inset-bottom) + 30rpx) 30rpx ;
			// display: flex;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			height: calc(112rpx + env(safe-area-inset-bottom));
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			/deep/.tn-btn-class{
				vertical-align: middle;
			}
			.right-button{
				/deep/.tn-btn-class{
					margin-left: 20rpx;
					border: 2rpx solid #CACACA;
					// border-color: #CACACA!important;
				}
			}
			
			
		}
	}
	.popup-field{
		padding:80rpx 60rpx 60rpx;
		.title{
			font-size: 40rpx;
			color:#616571;
			text-align: center;
			
		}
		.input{
			margin:68rpx 0;
			width: 100%;
			/deep/.tn-input{
				view:first-child{
					width:100%;
				}
			}
		}
	}
</style>
